<template>
  <div @scroll="handleScroll">
    <a-layout :style="{width: '100%'}">
      <top-bar @getLoginStatus="getLoginStatus"/>
      <a-layout-content :style="{padding: '0 50px', marginTop: '64px'}">
        <a-breadcrumb style="margin: 8px 0">
        </a-breadcrumb>
        <div :style="{ background: '#fff', padding: '2px', minHeight: '500px' }">
          <a-row>
            <a-col :span="4">
              <div :style="{
                      height: '500px',
                      overflowY: 'auto',
                      overflowX: 'hidden',
                      scrollbar: 'none',
                      position: 'relative',
                      border: '1px solid #ebedf0',
                      borderRadius: '2px',
                      padding: '48px',
                      textAlign: 'center',
                      background: '#fafafa',
                    }">
                <side-bar></side-bar>
              </div>
            </a-col>
            <a-col :span="16">
              <a-carousel autoplay style="top: 30px">
                <div v-if="carouselData.length>0" v-for="data in carouselData">
                  <div v-if="typeof data === 'undefined'">
                    <p>1</p>
                  </div>
                  <a-image v-else-if="typeof data!=='undefined'" :src="data.skuImg" width="450px"/>
                </div>
              </a-carousel>
            </a-col>
            <a-col :span="4">
              <div v-if="loginStatus" style="justify-content: center; align-items: center">
                <router-link to="/userinfo">
                  <a-avatar :src="user.header" :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }" :style="{marginTop: '15px'}">
                    <template #icon>
                      <UserOutlined />
                    </template>
                  </a-avatar>
                </router-link>
                <a-row style="margin-top: 10px" justify="space-around" align="middle">
                  <a-col :span="6">
                    <a-typography-title :level="4">
                      {{user.nickname}}
                    </a-typography-title>
                  </a-col>
                </a-row>
              </div>
              <div  v-if="!loginStatus">
                <router-link to="/login">
                  <a-avatar  :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }" :style="{marginTop: '15px'}">
                    <template #icon>
                      <UserOutlined />
                    </template>
                  </a-avatar>
                </router-link>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-layout-content>

      <a-row :style="{marginTop:'10px'}" :gutter="16">
        <a-col :span="3"></a-col>
        <a-col class="gutter-row" :span="18" >
          <a-row justify="space-between" align="middle">
            <a-col :span="5" v-for="product in productList">
              <a-card hoverable style="width: 231px; margin-top: 3px"  @click="handleProduct(product.spuId, product.skuId)">
                <template #cover>
                  <img alt="example" :src="product.skuImg"
                  fallback="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  />
                </template>
                <a-card-meta :title="product.skuTitle">
                  <template #description>
                    <a-typography-text strong>
                      ￥{{product.skuPrice}}
                    </a-typography-text>
                  </template>
                </a-card-meta>
              </a-card>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="3"></a-col>
      </a-row>

      <tail-bar/>
    </a-layout>
  </div>

</template>

<script setup>
import SideBar from '@/components/home-sideBar'
import TopBar from '@/components/common/TopBar'
import TailBar from "@/components/common/TailBar"
import request from "@/utils/request";
import {message} from "ant-design-vue";
import {ref, onBeforeMount, watch} from 'vue'
import router from "@/router";
import {UserOutlined} from '@ant-design/icons-vue';

let loginStatus = ref(false)
let user = ref({})

const getLoginStatus = (data)=>{
  loginStatus.value = data
}

  let productList= ref([])
  let carouselData = ref([])  //主页走马灯要展示的数据，抽取四个

/**
 * 随机生成 n 个不重复的随机值
 * @param min 最小范围
 * @param max 最大范围
 * @param n 个数
 * @returns {any[]}
 */
  function generateUniqueRandoms(min, max, n) {
    if (n > (max - min + 1)) {
      throw new Error('Range too small');
    }

    let set = new Set();
    while (set.size < n) {
      let num = Math.floor(Math.random() * (max - min + 1)) + min;
      set.add(num);
    }
    return [...set];
  }

  //跳转到商品详情页
  function handleProduct(spuId, skuId){
    router.push({
      path: '/product/info/baseAttrs',
      query: {spuId, skuId}
    })
  }

  const getProduct = ()=>{
    request({
      url: '/search/es/product/sku/search',
      method: 'post',
      data: request.adornData({isRandom: 1, hasStock: 1}, false)
    }).then(res => {
      if(res.code === 0){
        res.data.products.forEach(item => {
          productList.value.push(item)
        })
        let randomIndex = generateUniqueRandoms(0, res.data.products.length, 4)
        carouselData.value = []
        randomIndex.forEach(index => {
          carouselData.value.push(productList.value[index])
        })
      }
    }).catch(err=>{
      console.log('获取随机数据异常', err.message)
      message.error('获取推荐商品异常'+ err.message)
    })
  }

  const handleScroll = (event) => {
    const { scrollTop, clientHeight, scrollHeight } = event.target;
    // 检查是否触底
    if (scrollTop + clientHeight >= scrollHeight) {
      // 触底事件的处理逻辑
      console.log('触底了！');
    }
  };

  onBeforeMount(()=>{
    getProduct()
  })

</script>

<style scoped>
/* For demo */
:deep(.slick-slide) {
  text-align: center;
  height: 500px;
  line-height: 500px;
  background: #364d79;
  overflow: hidden;
}
:deep(.slick-slide h3) {
  color: #fff;
}


#components-layout-demo-top .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl #components-layout-demo-top .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

[data-theme='dark'] .site-layout-content {
  background: #141414;
}

.gutter-box {
  background: #ebf3fc;
  padding: 8px 0;
}
</style>
